<script setup>
const emits = defineEmits(['change', 'sizeChange'])
const props = defineProps({
    page: {
        current: { type: Number, default: 1 },//当前页面
        size: { type: Number, default: 30 },//每页显示多少条
        total: { type: Number, default: 100 }//总共多少页
    }
})

const data = reactive({
    pageSizes: [30, 50, 100, 200, 300]//允许修改的每页显示条数
})

onMounted(() => {
    //将默认显示多少条追加到pageSizes里面
    if (data.pageSizes.indexOf(props.page.size) == -1) {
        data.pageSizes.unshift(props.page.size)
    }
})
</script>

<template>
    <div class="page">
        <el-pagination v-model:current-page="props.page.current" :page-sizes="data.pageSizes" v-model:page-size="props.page.size" :background="false" layout="sizes,prev, pager, next, jumper,total" :total="props.page.total" @current-change="(val) => { emits('change', val) }" @size-change="(val) => { emits('sizeChange', val) }" :pager-count="5" />
    </div>
</template>

<style scoped lang="scss">
.page {
    margin-top: var(--el-card-padding);
}
</style>
